<template>
	<view>
		<view class="page">
			<view class="tip-box">
				<view class="left">
					<view class="title">Hello, 尊敬的用户 </view>
					<view class="subtext">登录解锁更多精彩内容</view>
				</view>
			</view>
			<view class="form-mes">
				<view class="input-item">
					<view class="num">+86</view>
					<input @input="bindpancode" @blur="lossstyle" @focus="changestyle" class="item" maxlength="11"
						placeholder="请输入中国大陆手机号" placeholderClass="placeholder" type="number" />
				</view>
				<view class="input-item">
					<input @blur="pushcode" @focus="changestyle" @input="pushcode" class="item" data-inputNum="1"
						maxlength="6" placeholder="请输入验证码" placeholderClass="placeholder" type="number" />
					<button @tap.stop.prevent="getSms"
						:class="'code-btn ' + (getcode ? 'active' : '') + ' ptp_exposure'"
						data-ptpid="0a55-1480-8c29-d6e1" :disabled="isCodeBtnDisabled">
						{{ countdown < 60 ? countdown + ' 秒后重试' : '获取验证码' }}
					</button>
				</view>
				<view @tap="verifyCode" class="logoin submit ptp_exposure" data-ptpid="50c4-1348-ad62-db8f">登录</view>
				<view @tap="voiceCode" class="send_call ptp_exposure" data-ptpid="eaac-1adf-a790-feac" v-if="sendcall">
					收不到验证码？试试
					<text class="green">语音验证</text>
				</view>
				<view :class="'code-btn ' + (countdown === 60 ? 'active' : '')"
					@tap.stop.prevent="countdown === 60 && getSms" data-ptpid="0a55-1480-8c29-d6e1">

				</view>

			</view>
		</view>
		<view @tap="closeImgCode" class="toastbg ptp_exposure" data-ptpid="dad4-159d-ad73-a360" v-if="showimgcode">
		</view>
		<view class="imagecont" v-if="showimgcode">
			<view class="imagetitle">
				<input @input="getImgCode" class="imagevalue" maxlength="4" placeholder="请输入图片验证码"
					placeholderClass="placeholder" />
				<image lazyLoad @tap="changeImgCode" class="ptp_exposure" data-ptpid="75db-11fd-a7c2-3fdb"
					:src="imageCode" style="width: 160rpx; height: 64rpx"></image>
			</view>
			<view @tap="confirmCode" :class="'choosesure ' + (confirmactive ? 'active' : '') + ' ptp_exposure'"
				data-ptpid="35bd-1312-a0c2-9664">确定</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		components: {

		},
		data() {
			return {
				logs: [],
				nowindex: 0,
				regularLogin: false,
				select: '验证码登录',
				getcode: false,
				getcodemes: '获取验证码',
				sendcall: false,
				hidepass: false,
				callimg: false,
				phone: '',
				code: '',
				submit: {
					submit: false,
					text: '登录'
				},
				miniOpenId: '',
				redirect: '',
				showimgcode: false,
				imageCode: '',
				localcode: '',
				confirmactive: false,
				countdown: 60,
				countdownTimer: null,
				isCodeBtnDisabled: false,
			};
		},
		onLoad: function(e) {
			this.redirect = e.redirect || '';
		},
		methods: {

			// 验证手机号格式
			validatePhone(phone) {
				const pattern = /^1[3-9]\d{9}$/;
				return pattern.test(phone);
			},

			// 手机号输入框的input事件处理函数
			bindpancode(e) {
				this.phone = e.detail.value; // 更新手机号
				this.getcode = this.validatePhone(this.phone); // 验证手机号并更新获取验证码按钮状态
			},

			// 点击获取验证码的函数
			getSms() {
				if (!this.getcode) {
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					});
					return;
				}

				this.startCountdown(); //启用倒计时
				this.getcode = false;
				this.isCodeBtnDisabled = true;

				// 模拟HTTP请求发送验证码
				uni.request({
					url: 'http://139.196.14.177:8080/uni-cloud/sms/send?phone=' + this.phone, // 您的后端API地址
					method: 'POST',
					data: {
						phone: this.phone, // 传递手机号到后端
					},
					success: (res) => {
						console.log(res);
						if (res.data.code === 0) {
							this.sendcall === true;
							uni.showToast({
								title: '验证码已发送',
								icon: 'success'
							});
							// 可以在这里处理倒计时逻辑
						} else {
							uni.showToast({
								title: '发送失败，请稍后重试',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				});
			},

			verifyCode: function() {
				uni.request({
					url: 'http://139.196.14.177:8080/uni-cloud/sms/verify?phone=' + this.phone + '&code=' +
						this.code,
					method: 'POST',
					data: {
						phone: this.phone, // 传递手机号到后端
					},
					success: (res) => {
						console.log(res);
						if (res.data.code === 0) {
							this.sendcall === true;
							const token = res.data.data.token;
							uni.setStorageSync('token', token);
							uni.showToast({
								title: '登陆成功',
								icon: 'success'
							});
							// 保存用户手机号码到本地
							uni.setStorage({
								key: 'userPhoneNumber',
								data: res.data.data.phone, // 假设 phoneNumber 是从后端返回的包含手机号的字段
								success: function() {
									console.log('手机号码保存成功', res.data.data.phone);
								}
							});
							uni.request({
								url: this.$baseUrl + '/user/account/submit',
								method: 'POST',
								data: {
									phone: uni.getStorageSync('userPhoneNumber'),
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded',
									'token': uni.getStorageSync('token')
								},
								success: (res) => {
									if (res.data.code === 0) {
										console.log('手机号已存在后端', res);
									} else {
										console.error('手机号存后端失败：', res);
									}
								},
								fail: (err) => {
									console.error('手机号存后端请求错误：', err);
									uni.showToast({
										title: '请求错误',
										icon: 'none',
										duration: 2000
									});
								}
							});
							uni.switchTab({
								url: '/pages/mine/mine'
							})

							// 可以在这里处理倒计时逻辑
						} else {
							uni.showToast({
								title: '登陆失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				});
			},

			getImgCode: function(e) {},

			closeImgCode: function() {
				this.showimgcode = false;
			},

			voiceCode: function() {},

			changestyle: function(e) {},

			lossstyle: function(e) {},

			confirmCode: function() {},

			pushcode: function(e) {
				this.code = e.detail.value; // 更新手机号
			},

			changeImgCode: function() {},

			//验证码倒计时
			startCountdown() {
				if (this.countdownTimer) {
					clearInterval(this.countdownTimer)
				}
				this.countdown = 60;
				this.countdownTimer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown -= 1;
					} else {
						clearInterval(this.countdownTimer);
						this.countdownTimer = null;
						this.countdown = 60;
						this.isCodeBtnDisabled = false;
						this.getcode = true; // 重置按钮状态，允许重新获取验证码
					}
				}, 1000);
			}

		}
	};
</script>

<style lang="scss" scoped>
	@import "./login.scss";
</style>